<template>
	<view class="login">
		<view class="login-type">
			<view class="title">{{ tabCpd.title }}</view>
			<view class="type">
				<text @click="onSubTitleChangeClick">{{ tabCpd.subTitle }}</text>
				<uni-icons type="forward"></uni-icons>
			</view>
		</view>
		<!--  -->
		<passwordVue v-if="tabIndex === 0" />
		<mobileVue v-else />
		<!-- 社交账号登录 -->
		<view class="social-login">
			<view class="legend">
				<text class="text">其他登录方式</text>
			</view>
			<view class="social-account">
				<view class="icon">
					<uni-icons color="#00b0fb" type="qq" size="30"></uni-icons>
				</view>
				<view class="icon">
					<uni-icons color="#fb6622" type="weibo" size="30"></uni-icons>
				</view>
				<view class="icon">
					<uni-icons color="#07c160" type="weixin" size="30"></uni-icons>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, computed } from 'vue';
import passwordVue from './components/password.vue';
import mobileVue from './components/mobile.vue';

const tabIndex = ref(1);
const tabMetas = [
	{ title: '密码登录', subTitle: '验证码登录' },
	{ title: '验证码登录', subTitle: '密码登录' }
];

const tabCpd = computed(() => {
	return tabMetas[tabIndex.value];
});
const onSubTitleChangeClick = () => {
	tabIndex.value = Math.abs(tabIndex.value - 1);
};
</script>

<style lang="scss">
.login {
	padding: 60rpx;
}

.login-type {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	line-height: 1;
	margin: 40rpx 0 80rpx;
}

.type {
	color: #3c3e42;
	font-size: 30rpx;
	display: flex;
	align-items: center;
}

//
.social-login {
	margin-top: 100rpx;
	padding: 0 60rpx;

	.legend {
		position: relative;
		height: 40rpx;
		border-top: 4rpx solid #ebebeb;
	}

	.text {
		position: absolute;
		top: -50%;
		left: 50%;
		transform: translate(-50%);
		font-size: 28rpx;
		padding: 0 10rpx;
		color: #999;
		background-color: #fff;
	}

	.social-account {
		display: flex;
		justify-content: space-evenly;
		margin-top: 40rpx;

		.icon {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 80rpx;
			height: 80rpx;
			border-radius: 100rpx;
			background-color: #f6f6f6;
		}
	}
}
</style>
